// 1. 导入预设和转换器
import { presetWeapp } from 'unocss-preset-weapp'
import { extractorAttributify, transformerClass } from 'unocss-preset-weapp/transformer'

const { presetWeappAttributify, transformerAttributify } = extractorAttributify()

export default {
  presets: [
    // https://github.com/MellowCo/unocss-preset-weapp
    // 核心：提供所有原子化 CSS 类，并自动处理 rpx 单位
    presetWeapp(),
    // 属性化模式：让你可以用 bg="red-500" 这种写法
    presetWeappAttributify(),
  ],
  // 4. 快捷方式 - 定义你自己的“积木块”
  shortcuts: [
    {
      'flex-center': 'flex justify-center items-center',
      'flex-col': 'flex flex-col',
    },
  ],

  transformers: [
    // https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerAttributify
    // 属性化模式转换器：把 <view bg="red-500"> 转换成 <view class="bg-red-500">
    transformerAttributify(),

    // https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerClass
    transformerClass(),
  ],
}
